<template>
	<div>
		<van-tabs v-model="active">
		  <van-tab title="快捷登录">
			  <van-row style="width: 100%;height: 200px;margin-top: 4vh;">
				  <van-col style="width: 100%;height: 200px;">
					  <van-form @submit="onSubmit" style="width: 84%;margin-left: 8%;">
					    <van-field
					      v-model="username"
					      name="用户名"
					      placeholder="请输入用户名"
					      :rules="[{ required: true, message: '请填写用户名' }]"
					    />
						<div style="display: flex;flex-wrap: nowrap;">
							<van-field
							  v-model="password"
							  type="password"
							  name="密码"
							  placeholder="请输入验证码"
							  :rules="[{ required: true, message: '请输入验证码' }]" style="width: 67%;"
							/><van-button type="default" style="width: 90px;height: 35px;margin-top: 10px;">验证码</van-button>
						</div>
					    <div style="margin-top: 40px;margin-left: 3px;">
					      <van-button block type="info" native-type="submit" style="background-color: #323233;font-size: 16px;width: 86%;margin-left: 7%;">登录</van-button>
					    </div>
						<van-row style="width: 84%;height: 20px;margin-left: 8%;">
							<van-col span="18" style="line-height: 20px;font-size: 12px;text-align: left;">
								切换账号
							</van-col>
							<van-col span="6" style="line-height: 20px;font-size: 12px;text-align: right;">
								新用户注册
							</van-col>
						</van-row>
					  </van-form>
				  </van-col>
			  </van-row>
		  </van-tab>
		  <van-tab title="账号登录">内容 2</van-tab>
		</van-tabs>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data(){
			return{
				active:0,
				username: '',
				password: ''
			}
		},
		computed: {
			...mapGetters([
				'gives'
			])
		},
		created() {
			
		},
		methods: {
		    onSubmit(values) {
		      let username = this.username
		      this.$store.dispatch("vuexMineuser", username)
		      	.then(e => {
		      		console.log(e)
					if(e.data.data!= null){
						this.$router.push({path:'/mine'})
						localStorage.setItem('usernews',JSON.stringify(e.data.data))
					}
		      		// this.lists = e.data.data
		      	})
		    },
		  },
	}
</script>

<style>
</style>
